<template>
  <span>
    <span v-for="fi in filterItems" :key="fi.name">
      <el-input
        v-if="fi.type === 'input'"
        v-model="domain[fi.name]"
        :placeholder="fi.placeholder"
        class="inputFillter"
        @keyup.enter.native="handleFilter"
      />

      <el-date-picker
        v-if="fi.type === 'date'"
        v-model="domain[fi.name]"
        type="date"
        :placeholder="fi.placeholder"
        class="dateFillter"
      />

      <el-date-picker
        v-if="fi.type === 'date_year'"
        v-model="domain[fi.name]"
        type="year"
        :clearable="fi.clearable === undefined ? true : fi.clearable"
        :placeholder="fi.placeholder"
        class="dateFillter"
      />

      <el-date-picker
        v-if="fi.type === 'date_month'"
        v-model="domain[fi.name]"
        type="month"
        :clearable="fi.clearable === undefined ? true : fi.clearable"
        :placeholder="fi.placeholder"
        class="dateFillter"
      />
      <el-select
        v-if="fi.type === 'select'"
        v-model="domain[fi.name]"
        :placeholder="fi.placeholder"
        :clearable="fi.clearable === undefined ? true : fi.clearable"
        class="inputFillter"
      >
        <el-option
          v-for="item in get_options(fi)"
          :key="item.id"
          :label="item.display_name"
          :value="item.id"
          class="inputFillter"
        />
      </el-select>

      <el-select
        v-if="fi.type === 'select2'"
        v-model="domain[fi.name]"
        :placeholder="fi.placeholder"
        clearable
        class="inputFillter"
      >
        <el-option
          v-for="item in get_options(fi)"
          :key="item.value"
          :label="item.name"
          :value="item.value"
          class="inputFillter"
        />
      </el-select>
    </span>
  </span>
</template>

<script>
import './style.scss'

export default {
  name: 'FilterItems',
  components: {},
  props: {
    filterItems: {
      type: Array,
      default() {
        return []
      }
    },
    domain: {
      type: Object,
      default() {
        return {}
      }
    },
    configs: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      date_month: null
    }
  },
  computed: {},
  created() {},
  methods: {
    get_options(fi) {
      if (!fi.options_for_select) {
        return fi.options_for_select_init || []
      }

      if (typeof fi.options_for_select !== 'function') {
        return fi.options_for_select
      }

      // options_for_select 选项 若是个函数, 则在 configs 中有定义
      return this.configs.get_options(fi)
    }
  }
}
</script>
